<script setup lang="ts">
  import { useCssScope } from '@/hooks/use-css-scope'
  import Condition from './condition.vue'
  import type { SchemaSearchPageProps } from './interface'

  interface IProps extends Omit<SchemaSearchPageProps, 'doSearch' | 'columns'> {
    searchClassName?: string
  }

  defineProps<IProps>()

  const emit = defineEmits<{
    'conditions-change': [val: Record<string, any> | undefined]
  }>()

  const cssScope = useCssScope('search-bar')
</script>

<template>
  <div :class="[cssScope(), searchClassName]">
    <Condition
      :fields="searchFields"
      v-if="searchFields?.length"
      :is-sync-query-string="isSyncQueryString"
      :reset-btn-show="resetBtnShow"
      @conditions-change="emit('conditions-change', $event)"
    />
  </div>
</template>
